<template>
    <div id="calendar" class="lt">
                          <ul class="weekdays">
                              <li>一</li>
                              <li>二</li>
                              <li>三</li>
                              <li>四</li>
                              <li>五</li>
                              <li style="color:red">六</li>
                              <li style="color:red">日</li>
                          </ul>
                          <div class="arrDays">
                              <div  v-for="dayList in arrDays" :key="dayList" class="calendarData">
                                  <div style="" class="years">
                                      {{dayList.year}}年{{dayList.moth}} 月
                                      <span style="display: none;">
                                          <span class="timeHide" v-if="dayList.moth>9">
                                              {{dayList.year}}-{{dayList.moth}}
                                          </span>
                                          <span v-else class="timeHide">{{dayList.year}}--{{dayList.moth}}</span>
                                      </span>
                                  </div>
                                  <ul class="days">
                                     <li v-for="(day,index) in dayList.days" :key="index"  id="danzou">
                                         <!--@click="selectDay()" -->
                                       <!--今天-->   
                                       
                                     <span v-if="day!=''">
                                               <span v-if="day.getFullYear() == new Date().getFullYear() 
                                                   && day.getMonth() == new Date().getMonth() 
                                                   && day.getDate() == new Date().getDate()" class="curDay active">
                                                   {{day.getDate()}}
                                                   </span>
                                            <span v-else class="curDay">
                                                {{day.getDate()}}
                                            </span>
                                       </span>
                                           
                                    </li>
                                  </ul>
                              </div>
                              
                          </div>


<div style="z-index:100">
    <van-cell is-link @click="showPopup">展示弹出层</van-cell>
    <van-popup v-model="show">内容</van-popup>
</div>

                          
</div>
</template>
<style scoped>

@import url("//unpkg.com/element-ui@2.15.1/lib/theme-chalk/index.css");
#calendar{
    border: 1px solid #dfe6ec;
    width: 100%;
  }
  .month {
      width: 420px;
      background: #eef1f6;
     
  }
   
  .month ul {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: space-between;
      color: #374453;
  }
   
  .year-month {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
  }
   
  /*.year-month:hover {
      background: rgba(150, 2, 12, 0.1);
  }*/
   
  .choose-year {
      padding-left: 20px;
      padding-right: 20px;
  }
   
  .choose-month {
      text-align: center;
      font-size: 16px;
  }
   
  .arrow {
      padding: 30px;
  }
  .month ul li {
       color: #374453;
      font-size: 16px;
      text-transform: uppercase;
      letter-spacing: 3px;
  }
   
  .weekdays {
      margin: 0;
      padding:0px 0;
      background: #eef1f6;
      display: flex;
      flex-wrap: wrap;
      color: #FFFFFF;
      justify-content: space-around;
      width:100%;
      color: #374453;
      padding-right: 17px;
      background: #eef1f6;
  }
   
  .weekdays li {
      display: inline-block;
      width: 13.6%;
      text-align: center;
  }
   
  .days {
      padding: 0;
      background: #FFFFFF;
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      height: 100%;
      width: 420px;
  }
   
  .days li {
      list-style-type: none;
      display: inline-block;
      width: 14.2%;
      text-align: center;
      font-size: 1rem;
      
  }
   .days li span{
           display: inline-block;
           color: #000;
      cursor: pointer;
      vertical-align: middle;
      height: 50px;
      line-height: 50px;
      width: 50px;
      border-radius: 25px;
   }
  .days li span .active {
      width: 50px;
      border-radius: 25px;
      background: #0097FF;
      color: #fff;
      display: inline-block;
         
  }
   
  .days li .other-month {
      padding: 5px;
      color: darkgrey;
  }
   
  .days li span:hover {
      background: #0097FF;
      color: #FFFFFF;
  }
  .arrDays{
      height:458px;
      overflow-y: auto;
  }
  .years{
      height: 30px;
      line-height: 30px;
      text-align: left;
      padding: 0 10px;
      color: #0097FF;
  }
</style>

<script>
import $ from 'jquery'

export default {
    data(){
        return{
            currentDay: '',
            currentMonth: '',
            currentYear: '',
            currentWeek: '',
            days: [],
            thisYear:null,
            thisMonth:null,
            arrDays:[],
            dan:"",//用来确定修改单双周的
           show: false,
           
        }
    },

mounted(){
        var date=new Date()
        self.currentDay = date.getDate();
        self.currentYear = date.getFullYear();
        self.currentMonth = date.getMonth() + 1;
        self.currentWeek = date.getDay(); // 1...6,0
        this.days=[]
        var month=date.getMonth() - 1;
        var year=date.getFullYear();
        for(var i=0;i<14;i++){
            console.log("当前月份"+month)
            if(i==0){
                this.initData("2021-01-01 00:00:00");//获取当前时间
            }else{
                if(month>12){
                    this.initData(this.formatDate(year+1,month-12,1));
                }else{
                    this.initData(this.formatDate(year,month,1));
                }
            }
            month+=1
            
        }
        $('#calendar').on('click','.curDay',function(){
            console.log("点击了当前对象")
            $(this).addClass('active')
            console.log($(this).text())
            console.log($(this).parents('.days').siblings('.years').find('.timeHide').text().replace(/(^\s*)|(\s*$)/g, ""))
            $(this).parents('li').siblings().find('.curDay').removeClass('active')
            $(this).parents('.calendarData').siblings().find('.curDay').removeClass('active')
        })
    },

methods:{
        addInfo(){//
            this.isShow=!this.isShow
        },
        xiugai(e){
            console.log(e.target.text())
        },
     showPopup() {
      this.show = true;
    },
        closeModel(){
            this.isShow=!this.isShow
        },
        initData(cur){
            var self=this
            var date = new Date(cur);
               var currentDay = date.getDate();
               var currentYear = date.getFullYear();
               var currentMonth = date.getMonth() + 1;
               var currentWeek = date.getDay(); // 1...6,0

               if (currentWeek == 0) {//星期天
                currentWeek = 7;
               }
           var str = this.formatDate(currentYear , currentMonth, currentDay);
           var arr=[]
               this.days.length = 0;
           // 今天是周日，放在第一行第7个位置，前面6个
               for (let i = currentWeek - 1; i >= 0; i--) {
                let d = new Date(str);
                d.setDate(d.getDate()-i);
                if(i==0){
                    arr.push(d);
                }else{
                    arr.push('');
                }
               }
           for (let i = 1; i <= 42 - currentWeek; i++) {
                let d = new Date(str);
                d.setDate(d.getDate() + i);
                if(currentMonth==(d.getMonth()+1)){
                    arr.push(d);
                    
                }
               
           }
           var obj={}
           obj.moth=currentMonth
           obj.days=arr
           obj.year=currentYear
           self.arrDays.push(obj)
        },
        formatDate(year,month,day){
           var y = year;
           var m = month;
           if(m<10) m = "0" + m;
           var d = day;
           if(d<10) d = "0" + d;
           return y+"-"+m+"-"+d
        },

    }
}
</script>